<template>
  <div class="container">
    <topCommon />
    <div class="main-content">
      <router-view v-slot="{ Component, route }">
        <!-- <transition name="el-fade-in-linear"> 启动动画-->
        <keep-alive v-if="route.meta.keepAlive">
          <component :is="Component" />
        </keep-alive>
        <component :is="Component"
          v-else />
        <!-- </transition> -->
      </router-view>
    </div>
  </div>
</template>

<script>
  import topCommon from '@/components/top-common/index';

  export default {
    name: 'views',
    components: {
      topCommon
    }
  };
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100vh;
    position: relative;
    .main-content {
      height: calc(100% - $--head-H);
      width: 100%;
      overflow: hidden;
    }
  }
</style>